<template>
  <div>
    <div class="clearfix player-item">
      <el-select v-model="valueList[keyLength].host" :key="keyLength" :placeholder="hostText" :loading="isLoading.host[keyLength]" filterable clearable @change="handleGetSelect('host')" @visible-change="handleLoadhost" @click="setValueTeam">
      <el-option
        v-for="team in teamList"
        :key="team.value"
        :label="team.name"
        :value="team"
        :disabled="team.disabled">
      </el-option>
    </el-select>
    </div>
    <p class="vs">vs</p>
    <div class="clearfix player-item">
      <el-select v-model="valueList[keyLength].guest" :key="keyLength" :placeholder="guestText" :loading="isLoading.guest[keyLength]" filterable clearable @change="handleGetSelect('guest')" @visible-change="handleLoadguest" @click="setValueTeam">
        <el-option
          v-for="team in teamList"
          :key="team.value"
          :label="team.name"
          :value="team"
          :disabled="team.disabled">
        </el-option>
      </el-select>
    </div> 
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    keyLength: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 8
    },
    valuedata: {
      type: Object,
      default: function () {
        return {
          host: {
            value: '',
            name: ''
          },
          guest: {
            value: '',
            name: ''
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      race_weedour_teamlist: 'race_weedour_teamlist',
      race_weedout_vslist: 'race_weedout_vslist'
    })
  },
  mounted () {
    this.teamList = this.valuedata
    if (this.valuedata) {
      this.valueList[this.keyLength] = this.valuedata
      if (this.$route.query.isedit === 'yes') {
        for (var i = 0; i < this.race_weedour_teamlist.length; i++) {
          if (this.valuedata.guest.value === this.race_weedour_teamlist[i].value || this.valuedata.host.value === this.race_weedour_teamlist[i].value) {
            this.$set(this.race_weedour_teamlist[i], 'disabled', false)
            break
          }
        }
      }
    }
    // console.log(this.valuedata)
    // console.log(this.race_weedout_vslist)
  },
  destroyed () {
    this.valueList = []
  },
  data () {
    return {
      hostText: '请选择参赛队伍',
      guestText: '请选择参赛队伍',
      isLoading: {
        host: new Array(this.total / 2).fill(true),
        guest: new Array(this.total / 2).fill(true)
      },
      teamList: {
        value: '',
        name: ''
      },
      valueList: new Array(this.total / 2).fill({
        host: {
          value: '',
          name: ''
        },
        guest: {
          value: '',
          name: ''
        }
      })
    }
  },
  methods: {
    setValueTeam () {
      this.teamList = this.valuedata
    },
    handleGetSelect (type) { // 甲方
      if (this.valueList[this.keyLength] && (this.valueList[this.keyLength].host.value !== '' || this.valueList[this.keyLength].guest.value !== '')) { // 对阵数据有变化时
        // console.log('修改' + (this.keyLength + 1) + '组 ->' + type)
        if (type === 'host' && this.valueList[this.keyLength].host && this.valueList[this.keyLength].host.value && this.valueList[this.keyLength].host.value.includes('null')) {
          this.$message({
            message: '主队不能轮空，请重新选择！',
            type: 'info'
          })
          this.valueList[this.keyLength].host = ''
        }
        this.$emit('valueChange', this.valueList[this.keyLength], this.keyLength)
        this.fliteTeam()
      }
    },
    handleLoadhost () {
      this.teamList = this.race_weedour_teamlist
      this.$set(this.isLoading.host, this.keyLength, false)
    },
    handleLoadguest () {
      this.teamList = this.race_weedour_teamlist
      this.$set(this.isLoading.guest, this.keyLength, false)
    },
    fliteTeam () { // 匹配已选禁用
      for (var i = 0; i < this.race_weedour_teamlist.length; i++) {
        var isExist = false
        for (let j = 0; j < this.race_weedout_vslist.length; j++) {
          let hostValue = this.race_weedout_vslist[j] && this.race_weedout_vslist[j].host && this.race_weedout_vslist[j].host.value
          let guestValue = this.race_weedout_vslist[j] && this.race_weedout_vslist[j].guest && this.race_weedout_vslist[j].guest.value
          if (hostValue === this.race_weedour_teamlist[i].value || guestValue === this.race_weedour_teamlist[i].value) {
            isExist = true
            break
          }
        }
        if (!isExist) {
          this.$set(this.race_weedour_teamlist[i], 'disabled', false)
        } else {
          this.$set(this.race_weedour_teamlist[i], 'disabled', true)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.player-item{
  line-height: 20px;
}
.vs{
  text-align: left;
  text-align: center;
  margin: 10px 0;
}
.el-select-dropdown__item.is-disabled{
  display: none;
}
</style>
